<template>

      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="callout callout-info">
              <h5><i class="fas fa-info"></i> 欢迎进入后台管理系统:------超级管理员</h5>
                  Welcome to the background management system: Super administrator
            </div>
            <!-- Main content -->
            <div class="invoice p-3 mb-3">
              <!-- title row -->
              <div class="row">
                <div class="col-12">
                  <h4>
                    <i class="fas fa-globe"></i> 超级管理员信息.Admin.
                    <small class="float-right">oo</small>
                  </h4>
                </div>
                <!-- /.col -->
              </div>
              <!-- info row -->
              <div class="row invoice-info">
                <div class="col-sm-4 invoice-col">
                 <el-card class="box-card" >
                      <el-row :gutter="12">
                          <el-col :span="8">
                              <el-card shadow="always">
                              账号
                              </el-card>
                          </el-col>
                          <el-col :span="8" >
                              <el-card shadow="hover">
                              {{admin.account}}
                              </el-card>
                          </el-col>
                      </el-row>
                     
                      <el-row :gutter="12">
                          <el-col :span="8">
                              <el-card shadow="always">
                              权限
                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover">
                              <span v-for="perm in admin.perms" :key="perm.id">{{perm.name}}<br></span>
                              </el-card>
                          </el-col>
                      </el-row>
                      <el-row :gutter="12">
                          <el-col :span="8">
                              <el-card shadow="always">
                              角色
                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover">
                              <span v-for="role in admin.roles" :key="role.id">{{role.name}}<br></span>
                              </el-card>
                          </el-col>
                      </el-row>
                      
                      <el-row :gutter="12">
                          <el-col :span="8">
                              <el-card shadow="always">
                              状态
                              </el-card>
                          </el-col>
                          <el-col :span="8">
                              <el-card shadow="hover">
                              {{admin.state=='y'?"可用":"禁用"}}
                              </el-card>
                          </el-col>
                      </el-row>
                  </el-card>
                </div>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
              </div>
                <!-- accepted payments column -->
                <div class="col-6">
                  <p class="lead">蜗牛学院提供技术支持:</p>
                  <p class="lead">充值续费: Payment Methods:</p>
                  <img src="../assets/dist/img/credit/visa.png" alt="Visa">
                  <img src="../assets/dist/img/credit/mastercard.png" alt="Mastercard">
                  <img src="../assets/dist/img/credit/american-express.png" alt="American Express">
                  <img src="../assets/dist/img/credit/paypal2.png" alt="Paypal">

                  <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                    Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem
                    plugg
                    dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
                  </p>
                </div>
          </div>
        </div>
        </div>
      </div>
</template>
<script>
const axios = require("axios");
  export default {
    data() {
       return{
      admin: ''
       }
    },
     mounted(){
            axios.get("http://192.168.6.189:8080/hpl-admin/get").then((r) => {
                if(r.data.code == 200){
                     let a = r.data.data;
                     this.admin=a[0];
                     console.log(r.data.data)
                }else if(r.data.code === 403){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else if(r.data.code === 500){
                                        this.$notify({
                                            title: '警告',
                                            message: r.data.msg,
                                            type: 'warning'
                                            }); 
                                    }else{
                                this.$notify({
                                    title: '警告',
                                    message: '系统繁忙！',
                                    type: 'warning'
                                    }); 
                            } 
            })
    }
  }
</script>